import React,{useState} from 'react'
import { PickerView,Icon } from 'antd-mobile'

export default function Selector(props) {
  const {selectors,dispatch,condition}=props

  const updateStatus=(item)=>{
    let closer_id
    if(selectors.some(i=>i.status)){
      closer_id=selectors.find(i=>i.status).id
      dispatch({type:'close',data:closer_id})
    }
    if(item.id===closer_id)return
    setTimeout(()=>{
      dispatch({type:item.status?'close':'open',id:item.id})
    },100)
  }

  function setSelectorTitleColor(index){
    if(index===0){
      let data=selectors[index].data
      return {color:(data.length===0?false:data.length===1?false:data.length===2&&data[1]==='null'?false:true)?'#21b68a':''}
    }else if(index<3){
      return {color:selectors[index].data.length!==0&&selectors[index].data[0]!=='null'?'#21b68a':''}
    }else{
      let arr=Object.values(selectors[index].data)
      return {color:arr.some(i=>i.length!==0)?'#21b68a':''}
    }
  }

  return (
    <div className='find-selectors-wrap'>
      <div className='find-selectors'>
        {
          selectors.map((i,index)=>{
            return <div key={i.id} className={'find-selector'+(selectors[index].status?' active':'')}>
              <div onClick={e=>{updateStatus(i)}}>
                <span style={setSelectorTitleColor(index)}>{i.name}</span> 
                <i className={'iconfont icon-arrow'+(selectors[index].status?' spin':'')}></i>
              </div>
            </div>
          })
        }
      </div>
      <div className={'find-selectors-content'+(selectors.some(i=>i.status)?' mask':'')} onClick={()=>dispatch({type:'close',data:null})}>
        {
          selectors.some(i=>i.status)?<div onClick={e=>e.stopPropagation()}>{/* 阻止事件冒泡 */}
            {
              selectors[0].status?
              <div className={'find-selector-area find-selector-container'+(selectors[0].status?' show':'')}>
                {
                  condition?
                  <Area data={[condition.area,condition.subway]} dispatch={dispatch} value={selectors[0].data}/>:
                  <div className='find-selector-loading'><Icon type='loading'></Icon>正在加载...</div> 
                }
              </div>:
              selectors[1].status?
              <div className={'find-selector-mode find-selector-container'+(selectors[1].status?' show':'')}>
                {
                  condition?
                  <Method data={condition.rentType} dispatch={dispatch} value={selectors[1].data}/>:
                  <div className='find-selector-loading'><Icon type='loading'></Icon>正在加载...</div> 
                }
              </div>:
              selectors[2].status?
              <div className={'find-selector-prise find-selector-container'+(selectors[2].status?' show':'')}>
                {
                  condition?
                  <Price data={condition.price} dispatch={dispatch} value={selectors[2].data}/>:
                  <div className='find-selector-loading'><Icon type='loading'></Icon>正在加载...</div> 
                }
                </div>:
              selectors[3].status?
              <div className={'find-selector-filter find-selector-container'+(selectors[3].status?' show':'')}>
                {
                  condition?
                  <Filter data={{roomType:condition.roomType,oriented:condition.oriented,floor:condition.floor,characteristic:condition.characteristic}} dispatch={dispatch} value={selectors[3].data}/>:
                  <div className='find-selector-loading'><Icon type='loading'></Icon>正在加载...</div> 
                }
                </div>:null
            }
            
          </div>:null
        }
      </div>
    </div>
    
  )
}


function Area(props){
  const {data,dispatch,value}=props
  let chooseData=[]
  return <div>
    <PickerView
      data={data}
      value={value}
      onChange={data=>{chooseData=data}}
    />
    <div className='find-selector-btn'>
      <div onClick={()=>dispatch({type:'close',id:1})}>取消</div>
      <div onClick={()=>dispatch({type:'update',id:1,data:chooseData})}>确定</div>
    </div>
  </div>
}

function Method(props){
  const {data,dispatch,value}=props
  let chooseData=[]
  return <div>
    <PickerView
      data={data}
      value={value}
      cascade={false}
      onChange={data=>{chooseData=data}}
    />
    <div className='find-selector-btn'>
      <div onClick={()=>dispatch({type:'close',id:2})}>取消</div>
      <div onClick={()=>dispatch({type:'update',id:2,data:chooseData})}>确定</div>
    </div>
  </div>
}

function Price(props){
  const {data,dispatch,value}=props
  let chooseData=[]
  return <div>
    <PickerView
      data={data}
      value={value}
      cascade={false}
      onChange={data=>{chooseData=data}}
    />
    <div className='find-selector-btn'>
      <div onClick={()=>dispatch({type:'close',id:3})}>取消</div>
      <div onClick={()=>dispatch({type:'update',id:3,data:chooseData})}>确定</div>
    </div>
  </div>
}

function Filter(props){
  const {data,dispatch,value}=props
  const types=Object.keys(data)
  let _chooseData='{roomType:[],oriented:[],floor:[],characteristic:[]}'
  const [chooseData, setChooseData] = useState(JSON.stringify(value)!==_chooseData?value:{roomType:[],oriented:[],floor:[],characteristic:[]})

  function showTitle(type){
    let obj={
      roomType:'户型',
      oriented:'朝向',
      floor:'楼层',
      characteristic:'房屋亮点',
    }
    return obj[type]
  }

  const changeData=(type,value)=>{
    let res={...chooseData}
    let data=res[type]
    if(data.includes(value)){//有选中删除
      data.splice(data.findIndex(i=>i===value),1)
    }else{//反之push到对应集合
      data.push(value)
    }
    setChooseData({...res})
  }

  const filterRender=(title,data)=>{
    return <div key={title}>
      <div className='title'>{showTitle(title)}</div>
      <div className='content'>
        {
          data.map(i=><div key={i.value} onClick={()=>changeData(title,i.value)} className={'content-item'+(chooseData[title].includes(i.value)?' active':'')}>{i.label}</div>)
        }
      </div>
    </div>
  }

  return <div>
    <div className='filter-content'>
      {
        types.map(type=>filterRender(type,data[type]))
      }
    </div>
    <div className='find-selector-btn'>
      <div onClick={()=>dispatch({type:'clear',id:4})}>清除</div>
      <div onClick={()=>dispatch({type:'update',id:4,data:chooseData})}>确定</div>
    </div>
  </div>
}